<template>
    <div >
        <el-dialog
            :title="classifyDialog.state === 0 ? '保存至草稿箱' : '发布文章'"
            :width="dialogWidth"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :before-close="cancelClassifyDialog"
        >
            <template>
                <div class="flex align-center">
					<div class="flex justify-end">
						<span class="color-ff0000 mar-r-5">*</span>
						<span class="mar-r-20 color-999999">选择文章分类</span>
					</div>

					<el-select v-model="classifyDialog.classifyId" placeholder="请选择分类">
						<el-option
							v-for="item in classifyList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						>
						</el-option>
					</el-select>
				</div>

				<div class="flex mar-t-30">
					<div class="flex justify-end">
						<span class="color-ff0000 mar-r-5">*</span>
						<span class="mar-r-20 color-999999">编辑文章摘要</span>
					</div>
					<el-input
                        style="min-width: 100px;"
						type="textarea"
						:rows="5"
						placeholder="请输入摘要内容"
						v-model="classifyDialog.abstract"
						maxlength="200"
  						show-word-limit
						resize="none"
					></el-input>
				</div>

                <div class="flex mar-t-30">
                    <div>
                        <div class="flex justify-end">
                            <span class="mar-r-20 color-999999">文章封面</span>
                        </div>
                        <div class="flex justify-end mar-t-10">
                            <span class="mar-r-20 color-999999">(至多一张)</span>
                        </div>
                    </div>

                    <div style="width: 100px; height: 100px;">
                        <div v-if="upload.fileList.length > 0">
                            <div v-for="(item, index) in upload.fileList" :key="index" class="w-px-100 h-auto pos-r">
                                <img :src="getCoverUrl" class="w-100 h-auto" />
                                <span class="close" @click="handleRemove(item)">x</span>
                            </div>
                        </div>

                        <el-upload
                            ref="uploadFile"
                            v-if="upload.limit === upload.fileList.length ? false : true"
                            list-type="picture-card"
                            :action="upload.action"
                            :limit="upload.limit"
                            :accept="upload.accept"
                            :name="upload.name"
                            :headers="uploadHeaders"
                            :on-exceed="handleExceed"
                            :show-file-list="false"
                            :on-success="handleFileSuccess"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                    </div>
                </div>
            </template>

            <template #footer>
                <span>
                    <el-button @click="cancelClassifyDialog">取消</el-button>
                    <el-button type="primary" @click="confirmClassifyDialog">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        props: {
            // 文章id（如果存在，表示编辑文章，通过此字段显示数据）
            articleId: {
                type: String | Number | null,
                default: ''
            },

            // 弹窗显示状态
            dialogVisible: {
                type: Boolean,
                default: false
            },

            // 分类列表
            classifyList: {
                type: Array,
                default: () => []
            },

            //  文章分类信息
            classifyDialog: {
                type: Object,
                default: () => {}
            }
        },

        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo,
                token: state => state.user.token,
            }),
            // 上传照片请求头
            uploadHeaders() {
                return {
                    'Authorization': 'Bearer ' + this.token
                }
            },

            // 获取图片地址
            getCoverUrl() {
                let url = this.upload.fileList.length > 0 ? (process.env.VUE_APP_IMG_BASE_API + this.upload.fileList[0].url) : ''
                return url
            }
        },

        data() {
            return {
                dialogWidth: '40%',
                // 上传
                upload: {
                    action: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_PROD_UPLOAD_BASE_API : process.env.VUE_APP_PROD_UPLOAD_BASE_API,
                    name: 'file',
                    accept: '.jpg,.png,.jpeg,.gif,.bmp',
                    limit: 1,
                    fileList: [],
                },
            }
        },

        created() {
            // 这里要回显数据
            if (this.articleId && this.classifyDialog && this.classifyDialog.coverUrl) {
                this.upload.fileList.push({ url: this.classifyDialog.coverUrl })
            }
        },

        mounted() {
            this.setDialogWidth()
            window.addEventListener('resize', this.setDialogWidth)
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.setDialogWidth)
        },

        methods: {
            // 弹窗宽度自适应
            setDialogWidth() {
                const screenWidth = window.innerWidth
                if (screenWidth <= 500) {
                    this.dialogWidth = '80%'
                } else if (screenWidth <= 800) {
                    this.dialogWidth = '75%'
                } else if (screenWidth <= 950) {
                    this.dialogWidth = '70%'
                } else if (screenWidth <= 1150) {
                    this.dialogWidth = '60%'
                } else if (screenWidth <= 1300) {
                    this.dialogWidth = '50%'
                }
            },
            // 文件上传成功
            handleFileSuccess(res, file, fileList) {
                if (res.code === 200) {
                    let arr = []
                    arr.push({ url: res.data.url })
                    this.upload.fileList = arr
                } else {
                    this.$message.error(res.message || '上传失败')
                }
            },

            // 上传图片超出限制
            handleExceed() {
                this.$message.warning('最多只能上传一张图片！')
            },

            // 删除图片
            handleRemove(file) {
                this.upload.fileList = []
            },

            // 取消关闭弹窗
            cancelClassifyDialog() {
                this.$emit('cancelClassifyDialog')
            },

            // 弹窗确认按钮回调
            confirmClassifyDialog() {
                if (this.upload.fileList.length > 0) {
                    this.classifyDialog.coverUrl = this.upload.fileList[0].url
                }
                this.$emit('confirmClassifyDialog')
            }
        }
    }
</script>

<style>
    .el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }  
</style>

<style lang="scss" scoped>
    .close {
        position: absolute;
        top: 3px;
        right: 3px;
        background: #f2f3f5;
        color: #999999;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
    }
</style>